<template>
  <zl-crud-simple :option="crudOption" style="height: 300px" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ZlCrudSimple } from '@zl-crud/components'

const crudOption = ref({
  mock: true,
  mockTemplate: {
    id: '@id',
    name: '@cname',
    age: '@integer(18, 60)',
    email: '@email',
    address: '@county(true)',
    date: '@date',
  },
  AvueOption: {
    column: [
      {
        label: '姓名',
        prop: 'name',
        search: true,
      },
      {
        label: '年龄',
        prop: 'age',
      },
      {
        label: '邮箱',
        prop: 'email',
      },
      {
        label: '地址',
        prop: 'address',
      },
      {
        label: '日期',
        prop: 'date',
      },
    ],
  },
})
</script>
